<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购申请</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            /*background: #d3dce6;*/
        }
        .bg-purple-light {
            /*background: #e5e9f2;*/
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
        }
        .el-col{
            margin-left: 50px;
        }
        #aop{
            height: 100px;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 125px;
        }
        .el-input--prefix .el-input__inner {
            padding-left: 30px;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-form ref="form" :model="form" label-width="80px">
        <el-row>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="产品名称">
                    <el-input v-model="form.productName" ></el-input>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="产品编号">
                    <el-input v-model="form.productNumber" ></el-input>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="需求数量">
                    <el-input v-model="form.demandQuantity" ></el-input>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="产品颜色">
                    <el-input v-model="form.productColor" ></el-input>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="支付方式">
                    <el-select v-model="form.paymentMethod" placeholder="请选择">
                        <el-option label="线上支付" value="线上支付"></el-option>
                        <el-option label="线下支付" value="线下支付"></el-option>
                    </el-select>
                </el-form-item>
            </div></el-col>
            <!--<el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="串码">
                    <el-input v-model="form.chuanma" ></el-input>
                </el-form-item>
            </div></el-col>-->
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="半成品">
                    <el-input v-model="form.semis" ></el-input>
                </el-form-item>
            </div></el-col>
        </el-row>

        <el-row>
            <!--<el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="申请人">
                    <el-select v-model="form.applicantId" placeholder="请选择">
                        <el-option
                                v-for="item in option"
                                :key="item.value"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div></el-col>-->
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="负责人">
                    <el-select v-model="form.director" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.manager"
                                :value="item.manager">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="需求时间">
                    <el-date-picker
                            v-model="form.demandTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="预计花费">
                    <el-input v-model="form.estimatedCost" ></el-input>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="需求部门">
                    <el-select v-model="form.demandDepartmentId" placeholder="请选择">
                        <el-option
                                v-for="item in option1"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="申请时间">
                    <el-date-picker
                            v-model="form.applicationTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-form-item label="申请类型">
                    <el-input  v-model="form.applicationType" ></el-input>
                </el-form-item>
            </div></el-col>
        </el-row>
        <el-form-item label="说明">
            <el-input id="aop" type="textarea" v-model="form.description"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即申请</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>

</div>

</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
new Vue({
    el:'#app',
    data() {
        return {
            form: {

            },
            option:[],
            options:[],
            option1:[],


        }
    },
    methods: {
        onSubmit() {
            axios.post("/apply",this.form).then(value => {
                if(value.data.code == 1){
                    this.$message(value.data.msg);
                }
            });
        }
    },mounted(){
        axios.get("/searchWy").then(value => {
            if (value.data.code==1){

                this.option=value.data.data.staffs;
                this.options=value.data.data.departments;
                this.option1=value.data.data.departmentsName;
            }
        })
    }
})
</script>
</html>